<template>  
  <div>  
    <!-- 添加订单表单 -->  
    <el-form :model="orderForm" ref="orderForm" label-width="120px">  
      <el-form-item label="订单编号">  
        <el-input v-model="orderForm.orderNumber" disabled></el-input>  
      </el-form-item>  
      <el-form-item label="产品名称">  
        <el-input v-model="orderForm.productName"></el-input>  
      </el-form-item>  
      <el-form-item label="数量">  
        <el-input-number v-model="orderForm.quantity" :min="1"></el-input-number>  
      </el-form-item>  
      <el-form-item>  
        <el-button type="primary" @click="submitOrder">添加订单</el-button>  
        <el-button @click="resetForm('orderForm')">重置</el-button>  
      </el-form-item>  
    </el-form>  
  
    <!-- 订单列表 -->  
    <el-table  
      :data="paginatedOrders"  
      style="width: 100%"  
      @sort-change="handleSortChange"  
    >  
      <!-- 表格列定义 ... -->  
      <el-table-column  
        prop="orderNumber"  
        label="订单编号"  
        width="180"  
      ></el-table-column>  
      <el-table-column  
        prop="productName"  
        label="产品名称"  
        width="180"  
      ></el-table-column>  
      <el-table-column  
        prop="quantity"  
        label="数量"  
        width="120"  
      ></el-table-column>  
      <!-- 操作列，添加删除按钮 -->  
      <el-table-column  
        label="操作"  
        width="180"  
      >  
        <template slot-scope="scope">  
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>  
        </template>  
      </el-table-column>  
    </el-table>  
  
    <!-- 分页器 -->  
    <el-pagination  
      @size-change="handleSizeChange"  
      @current-change="handleCurrentChange"  
      :current-page="currentPage"  
      :page-sizes="[5, 10, 15]"  
      :page-size="pageSize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="total"  
    ></el-pagination>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      orders: [], // 假设这是从后端获取的订单列表  
      currentPage: 1,  
      pageSize: 5,  
      total: 0, // 假设这是从后端获取的订单总数  
      orderForm: {  
        orderNumber: '', // 假设订单编号在添加时生成  
        productName: '',  
        quantity: 1,  
      },  
      // 用于存储排序信息  
      sort: {  
        prop: '',  
        order: ''  
      },  
    };  
  },  
  computed: {  
    // 计算当前页需要显示的订单  
    paginatedOrders() {  
      const start = (this.currentPage - 1) * this.pageSize;  
      const end = start + this.pageSize;  
      return this.orders.slice(start, end);  
    }  
  },  
  methods: {  
    // 提交订单  
    submitOrder() {  
      // 生成订单编号（这里简单使用当前时间戳和随机数，实际中可能从后端获取）  
      this.orderForm.orderNumber = Date.now() + Math.floor(Math.random() * 1000).toString();  
  
      // 假设将订单添加到后端，这里只是添加到本地数组  
      this.orders.push(Object.assign({}, this.orderForm));  
  
      // 重置表单  
      this.resetForm('orderForm');  
  
// ... 之前的代码 ...  
  
      // 更新总数（如果是实时从后端获取，则不需要这一步）  
      // 假设新添加的订单导致总数加1  
      this.total++;  
  
      // 如果需要，可以发送请求到后端保存订单  
      // 发送请求的代码会放在这里  
  
      // 跳转到第一页（可选）  
      this.currentPage = 1;  
  
      // 显示添加成功的消息  
      this.$message({  
        message: '订单添加成功',  
        type: 'success',  
      });  
    },  
  
    // 重置表单  
    resetForm(formName) {  
      this.$refs[formName].resetFields();  
    },  
  
    // 处理删除操作  
    handleDelete(index, row) {  
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {  
        confirmButtonText: '确定',  
        cancelButtonText: '取消',  
        type: 'warning',  
      })  
      .then(() => {  
        // 从数组中移除订单  
        this.orders.splice(index, 1);  
  
        // 更新总数（如果是实时从后端获取，则不需要这一步）  
        this.total--;  
  
        // 如果需要，可以发送请求到后端删除订单  
        // 发送请求的代码会放在这里  
  
        // 显示删除成功的消息  
        this.$message({  
          message: '删除成功',  
          type: 'success',  
        });  
      })  
      .catch(() => {  
        this.$message({  
          type: 'info',  
          message: '已取消删除'  
        });  
      });  
    },  
  
    // 处理分页大小变化  
    handleSizeChange(val) {  
      this.pageSize = val;  
      this.currentPage = 1; // 切换到第一页  
    },  
  
    // 处理当前页变化  
    handleCurrentChange(val) {  
      this.currentPage = val;  
    },  
  
    // 处理排序变化（如果表格有排序功能）  
    handleSortChange({ column, prop, order }) {  
      this.sort.prop = prop;  
      this.sort.order = order;  
  
      // 如果需要，可以发送请求到后端根据排序获取数据  
      // 发送请求的代码会放在这里  
    },  
  },  
};  
</script>  
  
<style scoped>  
/* 样式代码（如果需要） */  
</style>